<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 标题 -->
		<view class="t-b">用户注册</view>
		<form class="cl">
			<view class="t-a">
				<div class="label"><span>昵</span><span>称</span></div>
				<input type="text" name="name" placeholder="请输入您的昵称" v-model="name" />
			</view>
			<view class="t-a">
				<div class="label"><span>账</span><span>号</span></div>
				<input placeholder="请输入账号" v-model="account" />
			</view>
			<view class="t-a">
				<div class="label"><span>密</span><span>码</span></div>

				<input password type="text" name="password" placeholder="请输入您的密码" v-model="password" />
			</view>
			<view class="t-a">
				<div class="label"><span>密</span><span>码</span></div>
				<input password type="text" name="password2" placeholder="请再次输入您的密码" v-model="password2" />
			</view>
			<view class="t-a">
				<div class="label"><span>验</span><span>证</span><span>码</span></div>
				<div class="iptBtnBox">
					<input type="text" name="password2" placeholder="请输入图片验证码" v-model="code" />
					<image @click="getCaptchaFn" v-if="codeUrl" class="codeImg" :src="codeUrl"></image>
					<div @click="getCaptchaFn" class="codeImg" v-else>获取验证码</div>
				</div>
			</view>
			<button @click="submit()">注册</button>
		</form>
	</view>
</template>
<script>
	import config from "@/common/config";
	import {
		createAccount,
		getCaptcha,
		getOpenId
	} from "@/api/home.js";
	import md5 from "../../../common/md5/md5.min.js";
	export default {
		data() {
			return {
				name: "", //昵称
				account: "", //账号
				password: "", //密码
				password2: "", //密码
				code: "", // 验证码
				codeUrl: "",
			};
		},
		onLoad() {},
		methods: {
			async getCaptchaFn() {
				if (this.account) {
					uni.downloadFile({
						url: config.baseUrl + `/app/getCaptcha?account=${this.account}`, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								this.codeUrl = res.tempFilePath;
							}
						},
					});
				} else {
					uni.showToast({
						title: "请先输入账号",
						icon: "none",
					});
				}
			},
			//当前登录按钮操作
			async submit() {
				if (!this.name) {
					uni.showToast({
						title: "请输入昵称",
						icon: "none",
					});
					return;
				}
				if (!this.account) {
					uni.showToast({
						title: "请输入账号",
						icon: "none",
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: "请输入密码",
						icon: "none",
					});
					return;
				}
				if (!this.password2) {
					uni.showToast({
						title: "请输入两次密码",
						icon: "none",
					});
					return;
				}
				if (this.password != this.password2) {
					uni.showToast({
						title: "输入的两次密码不一致",
						icon: "none",
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: "请输入图片验证码",
						icon: "none",
					});
					return;
				}
				try {
					uni.showLoading({
						title: "加载中",
					});
					let that = this;
					wx.login({
						async success(res) {
							let wxcode = res?.code;

							if (wxcode) {
								try {
									//发起网络请求
									let res2 = await getOpenId(wxcode);
									let res = await createAccount({
										name: that.name,
										account: that.account,
										password: md5(that.password),
										code: that.code,
										openId: res2,
									});

									uni.showToast({
										title: "注册成功！",
										icon: "none",
									});
									uni.hideLoading();
									uni.reLaunch({
										url: "/pages/modules/login/index",
									});
								} catch (error) {
									uni.hideLoading();
								}
							} else {
								uni.hideLoading();
							}
						},
					});
				} catch (e) {
					uni.hideLoading();
				}
			},
		},
	};
</script>
<style lang="scss">
	.t-login {
		width: 80%;
		padding: 10%;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		height: 100vh;
		background: white;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		// border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a .label {
		width: 88rpx;
		height: 40rpx;
		position: absolute;
		left: 32rpx;
		top: 18rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
		color: #5677fc;
		font-weight: 700;
		text-align: justify;
		display: flex;
		justify-content: space-between;
		z-index: 3;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 25% 0 10% 0;
		font-weight: bold;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
		position: absolute;
		z-index: 3;
		left: 50%;
		width: 80%;
		transform: translateX(-50%);
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: "\20";
	}

	.iptBtnBox {
		position: relative;

		.codeImg {
			right: 2rpx;
			top: 2rpx;
			position: absolute;
			width: 164rpx;
			height: 70rpx;
			z-index: 99;
			line-height: 70rpx;
			border-left: 1px solid #e9e9e9;
			text-align: center;
		}
	}
</style>